/*
 * #depends folder-view-store.js
 */
Ext.ns('Ext.ux.mattgoldspink.subsonic');

Ext.ux.mattgoldspink.subsonic.FolderView = Ext.extend(Ext.Panel, {
    constructor: function(config) {
        Ext.apply(this, config, {
            layout:'card',
            id:'images-view',
            autoScroll: true,
            cls: 'album-view',
            plugins: ['msgbus'],
            activeItem: 0,
            items: [new Ext.DataView({
                store: Ext.ux.mattgoldspink.subsonic.FolderViewStore,
                ref: 'dataview',
                tpl: new Ext.XTemplate(
                    '<tpl for=".">',
                        '<div class="thumb-wrap" id="{title}">',
                        '<div class="thumb"><img src="{[ this.makeUrl(values.coverArt)]}" title="{title}" id="{id}" type="{isDir}" /></div>',
                        '<span class="x-editable album">{album}</span>',
                        '<span class="x-editable artist">{artist}</span>',
                        '<span class="x-editable title">{title}</span>',
                        '</div>',
                    '</tpl>',
                    '<div class="x-clear"></div>',
                    {
                        makeUrl: function(coverArt) {
                            var params = {
                                size: '100'
                            };
                            Ext.apply(params, Ext.ux.mattgoldspink.subsonic.LoginDetails);
                            params.id = coverArt;
                            return Ext.ux.mattgoldspink.subsonic.apiUrl + '/rest/getCoverArt.view?' + Ext.urlEncode(params);
                        }
                    }
                ),
                multiSelect: true,
                overClass:'x-view-over',
                itemSelector:'div.thumb-wrap',
                emptyText: 'No folders to display',
                listeners: {
                    click: this.handleImgClick,
                    dblclick: this.handleImgDblClick,
                    scope: this
                }
            })
            ]
        });
        Ext.ux.mattgoldspink.subsonic.FolderView.superclass.constructor.apply(this, arguments);
    },
    handleImgDblClick: function(view, index, el, evt) {
        el = Ext.get(el).query('.thumb>img')[0];
        if (el.getAttribute('type') == 'true') {
            this.publish('subsonic.folder.click', {id: Ext.get(el).getAttribute('id')});
        } else {
			this.publish('subsonic.player.play.playlist', {
				tracks: view.getStore(),
				startAtTrack: view.getStore().indexOfId(Ext.get(el).getAttribute('id'))
			});
        }
    },
    handleImgClick: function(view, index, el, evt){
        el = Ext.get(el).query('.thumb>img')[0];
        if (el.getAttribute('type') == 'true') {
            this.publish('subsonic.folder.selected', {id: el.getAttribute('id')});
        }
    }   
});
